<script setup>
import { onMounted, nextTick, ref, reactive, watch, toRefs } from 'vue'
const props = defineProps({
  values: {
    type: Array,
    default: [
      {
        src: "https://iconfont.alicdn.com/p/illus_3d/preview_image/6ysIeM30bNwA/4b47568f-0617-40a5-8d21-a081b239118e.png"
      },
      {
        src: "https://iconfont.alicdn.com/p/illus_3d/preview_image/6ysIeM30bNwA/b5a887c6-5e78-4d01-91b4-79575121491f.png"
      },
      {
        src: "https://iconfont.alicdn.com/p/illus_3d/preview_image/6ysIeM30bNwA/ec7e1b53-2355-4d7c-9477-157115e10d31.png"
      },
      {
        // src:"./测量.png"
        src: "https://iconfont.alicdn.com/p/illus_3d/preview_image/6ysIeM30bNwA/d5f4de92-173d-4b4e-b9c0-ea3b7ab77996.png"
      },
    ]
  }
}) 

const { values } = toRefs(props)

const emit = defineEmits(['toolClick'])

const sty = reactive({
  boxShadow: "0px 0px 15px #888888",
  // width: "80px"

})
const sty1 = reactive({
  // width: "0px",
  // opacity: 0,
  // transform: "translateX(-80px)"
})
const sty2 = reactive({
  boxShadow: "0px 0px 15px #888888",
  // border:"2px solid #888888",
  borderRadius: "50px"
})
const sty3 = reactive({
  boxShadow: "0px 0px 15px transparent",
  // border:"2px solid transparent",
  borderRadius: "50px"
})
const hoverId = ref(null),
  isFold = ref(false)

let currentLayer = {}

const itemClick = (idx) => {
  if (idx != 0) return
  isFold.value = !isFold.value
  // console.log(idx);
  // 传给父组件
  emit('toolClick', idx)

  // sty1.display = "none"
},
  itemEnter = (idx) => {
    hoverId.value = idx
  },
  itemLeave = () => {
    hoverId.value = null
  },
  dealSty = (idx) => {
    if (isFold.value) {
      if (idx != 0) {
        // return sty1
        return sty
      } else {
        return reactive({
          transform: "rotateZ(360deg)",
        })
      }
    }
    else {
      if (idx != hoverId.value) {
        return sty
      } else {
        return reactive({
          boxShadow: "",
          // transform: "rotateZ(360deg)",
          // width: "200px",
        })
      }
    }
  },
  imgClick=(idx)=>{
    emit('toolClick', idx)
  }

</script>

<template>
  <div class="measureTools" style="margin-left: 15px;">
    <div class="item" v-for="(item, idx) in values" @click="itemClick(idx)" @mouseenter="itemEnter(idx)"
      @mouseleave="itemLeave" :style="hoverId == idx && idx != 0 ? sty2 : sty3">
      <Transition name="img">
        <img :src=item.src :style="dealSty(idx)" v-if="!isFold || idx == 0" @click="imgClick(idx)">
      </Transition>
    </div>
  </div>
</template>

<style lang='less' scoped>
.measureTools {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;

  .item {
    margin: 5px;
    caret-color: transparent;
    cursor: pointer;
    display: flex;

    .img-enter-from,
    .img-leave-to {
      opacity: 0;
      transform: translateX(-100px);
    }

    .v-enter-active {
      transition: opacity 0.3s ease;
    }

    .v-enter-from,
    .v-leave-to {
      opacity: 0;
    }

    img {
      // height: 80px;
      // width: 80px;
      height: 50px;
      width: 50px;
      border-radius: 50px;
      transition: all 0.3s;
    }
  }
}
</style>